<template>
  <div class="common-layout card3">
    <!-- 头像 -->
    <RouterLink :to="`/home/${props.data!.user.id}`">
      <AvatarBackImg :avatar="props.data!.user.headshot" />
    </RouterLink>
    <!-- 信息 -->
    <div>
      <RouterLink
        :to="`/home/${props.data!.user.id}`"
        class="text-hidden__1 link"
      >
        {{ userName(props.data!.user.name, props.data!.user.id) }}
      </RouterLink>
      <RouterLink :to="`/video/${props.data!.id}`" class="text-hidden__2 link">
        {{ props.data!.title }}
      </RouterLink>
      <i>{{ dateConversion(props.data!.createTime) }}</i>
    </div>
    <!-- 封面 -->
    <RouterLink class="link" :to="`/video/${props.data!.id}`">
      <div
        class="cover link back-img__cover"
        :style="{
          'background-image':
            'url(&#34;' +
            commonApi.getCover(props.data!.coverPath) +
            '&#34;)',
        }"
      ></div>
    </RouterLink>
  </div>
</template>

<script lang="ts" setup>
import commonApi from "@/api/common";
import { Video } from "@/types/video";
import { dateConversion } from "@/utils/common";
import { userName } from "@/utils/common";
import AvatarBackImg from "./AvatarBackImg.vue";

const props = defineProps({
  data: {
    require: true,
    type: Object as () => Video,
  },
});
</script>

<style scoped lang="scss">
.common-layout.card3 {
  width: 100%;
  display: flex;

  & > div {
    &:nth-child(2) {
      margin-left: 15px;
      margin-right: 15px;
      flex-grow: 6;
    }
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .cover {
    width: 130px;
    height: 80px;
    border-radius: 5px;
  }

  .text-hidden__1 {
    color: grey;
    font-size: 15px;
  }
  .text-hidden__2 {
    width: 100%;
    margin-top: 5px;
    font-size: 15px;
  }

  i {
    color: grey;
    font-size: 13px;
  }
}
</style>
